<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">分类管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类编辑</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :model="formData" :rules="rules" ref="formData" label-width="100px" class="demo-ruleForm">
      <el-form-item label="名字" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="简介" prop="description">
        <el-input type="textarea" v-model="formData.description"></el-input>
      </el-form-item>
      <el-form-item class="options">
        <el-button @click="saveHandle('formData')" type="primary">提交</el-button>
        <el-button @click="backHandle()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import Api from '../services/api';

const foodType = Api.foodType;

export default {
  data() {
    return {
      formData: {
        name: '',
        description: '',
      },
      rules: {
        name: [
          { required: true, message: '名字不能为空', trigger: 'blur' },
          { min: 2, message: '最小长度为2', trigger: 'blur' },
        ],
        description: [
          { required: true, message: '简介不能为空', trigger: 'blur' },
          { min: 5, message: '最小长度为5', trigger: 'blur' },
        ],
      },
      isUpdate: false,  // 是否进行的是修改
      id: '',
    };
  },
  methods: {
    saveHandle(ref) {
      // $refs获取所有的设置了ref属性的标签
      this.$refs[ref].validate((valid) => {
        if (valid) { // 验证通过
          // this.$message.success('验证成功');
          // 调用向服务器端保存数据的方法
          if (this.isUpdate) { // 修改
            foodType.update(this.id, this.formData, (res) => {
              if (res.status === 'y') {
                this.$message.success('修改成功');
                this.backHandle();
              } else {
                this.$message.error('修改失败');
              }
            });
          } else { // 新增
            foodType.create(this.formData, (res) => {
              if (res.status === 'y') {
                this.$message.success('保存成功');
                // this.$router.push({ name: 'FoodType' }); // 跳转页面
                this.backHandle();
              } else {
                this.$message.error('保存失败');
              }
            });
          }
        } else { // 验证失败
          this.$message.error('验证失败'); // 弹出一个错误提示
        }
      });
    },
    backHandle() {
      this.$router.push({ name: 'foodType' });
    },
    getDataById(id) {
      this.id = id;
      foodType.getDataById(id, (res) => {
        if (res.status === 'y') {
          this.formData.name = res.data.name;
          this.formData.description = res.data.description;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
  created() { // 组件创建之后执行,属于vue内置的生命周期钩子函数
    // console.group('分类表及页面创建完成');
    // console.log(this.$route.query); // query是通过url进行传递的参数
    // console.groupEnd();
    if (this.$route.query.id) { // 如果当前的url中传递的有参数id
      this.isUpdate = true;
      this.getDataById(this.$route.query.id); // 获取当前需要修改的数据
    }
  },
};
</script>
<style scoped>
.demo-ruleForm{
  width: 80%;
  /* margin: 0 auto; */
}
.options{
  text-align: center;
}
</style>

